import { ref, markRaw, reactive } from 'vue'
import { setData } from 'el-plus-powerful-table-ts/es'
import { Edit, Remove } from '@element-plus/icons-vue'
import type { PowerfulTableHeader } from 'el-plus-powerful-table-ts'

export type Model = {
  partnerUuid: string
  settlementMonth: string
  settlementPeriodStart: string
  settlementPeriodEnd: string
  months: string[]
  settlementUuid: string
}

interface PowerfulTableData {
  list: Model[]
  header: any[]
  total: number
  listQuery: {
    pageNum: number
    pageSize: number
    partnerUuid: string
    settlementMonth: string
    settlementStatus: number | undefined
  }
}

export const defaultData = () => ({
  partnerUuid: '',
  settlementMonth: '',
  settlementPeriodStart: '',
  settlementPeriodEnd: '',
  months: [],
  settlementUuid: '',
})

export const useData = <Row = any>() => {
  const header: PowerfulTableHeader<Row>[] = [
    {
      label: '合作方名称', //显示的名称
      overflowTooltip: true,
      headerAlign: 'left',
      props: [
        {
          prop: 'partnerName',
        },
      ],
    },
    {
      label: '结算状态', //显示的名称
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'settlementStatus',
        },
      ],
    },
    {
      label: '收款单月份', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'settlementMonth',
        },
      ],
    },
    {
      label: '结算周期', //显示的名称
      headerAlign: 'left',
      width: 350,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'settlementPeriod',
        },
      ],
    },
    {
      label: '添加时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'createTime',
        },
      ],
    },
    {
      label: '更新时间', //显示的名称
      width: 180,
      headerAlign: 'left',
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'updateTime',
        },
      ],
    },
    {
      label: '创建人', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'creatorName',
        },
      ],
    },
    {
      label: '操作', //显示的标题
      fixed: 'right',
      headerAlign: 'left',
      minWidth: '180px',
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'operation',
        },
      ],
    },
  ]
  // 编辑区显隐
  const isDialog = ref(false)

  // 弹窗开关
  const switchs = reactive({
    role: false,
    edit: false,
  })

  const powerfulTableData: PowerfulTableData = reactive({
    list: [],
    header: header,
    total: 0,
    listQuery: {
      pageNum: 1,
      pageSize: 10,
      partnerUuid: '',
      settlementMonth: '',
      settlementStatus: undefined,
    },
  })


  // row 数据
  const currentForm = ref<Model>(defaultData())

  // 品牌列表
  const listData = ref<{ label: string; value: string }[]>([])

  return {
    header,
    switchs,
    isDialog,
    powerfulTableData,
    currentForm,
    listData,
  }
}
